import React, { PureComponent } from 'react'
import { Modal, Table } from 'antd'
import { getPriceFilter } from 'utils/utils'
import PropTypes from 'prop-types'

// import Style from './deliveredInfoModal.css'

class deliveredInfoModal extends PureComponent {
  static propTypes = {
    visible: PropTypes.bool,
    onCancel: PropTypes.func,
    onOk: PropTypes.func,
    deliveredInfo: PropTypes.object
  }

  constructor (props) {
    super(props)
    this.state = {
      columns: [
        {
          title: '货号',
          dataIndex: 'commodityNo'
        },
        {
          title: '商品名称',
          key: 'commodityName',
          render: record => {
            return (
              <>
                <span>{record.commodityName}</span><br />
                <span>{`创作者：${record.authorName}`}</span>
              </>
            )
          }
        },
        {
          title: '价格',
          dataIndex: 'commodityPrice',
          render: n => `¥${getPriceFilter(n)}`
        },
        {
          title: '属性',
          dataIndex: 'commoditySpec'
        },
        {
          title: '数量',
          dataIndex: 'quantity'
        },
        {
          title: '小计',
          dataIndex: 'orderAmount',
          render: n => `¥${getPriceFilter(n)}`
        }
      ]
    }
  }

  render () {
    const { columns } = this.state
    const { deliveredInfo, visible, onCancel } = this.props
    const { commodityList, commodityPriceCount, logisticsAmountCount, orderAmountCount, payChannel, consigneeName, addressDetails, orderNo, consigneeMobile, createTime } = deliveredInfo || {}
    return (
      <Modal
        title='打印发货单'
        width='1148px'
        visible={visible}
        onCancel={onCancel}
        footer={false}
      >
        <Table
          columns={columns}
          pagination={false}
          dataSource={commodityList}
          footer={
            () => {
              return (
                <div style={{ textAlign: 'right' }}>
                  <span style={{ marginRight: 8 }}>商品总价：{commodityPriceCount}</span>
                  <span style={{ marginRight: 8 }}>运费：{logisticsAmountCount}</span>
                  <span style={{ marginRight: 8 }}>订单总金额：{orderAmountCount}</span>
                  <span style={{ marginRight: 8 }}>支付方式：{payChannel}</span>
                </div>
              )
            }
          }
        />
        <div style={{ marginTop: 20 }}>
          <p>{consigneeName}</p>
          <p>
            <span style={{ marginRight: 16 }}>手机号码：{consigneeMobile}</span>
            <span>提交时间：{createTime}</span>
          </p>
          <p>
            <span style={{ marginRight: 16 }}>订单编号：{orderNo}</span>
            <span>收货地址：{addressDetails}</span>
          </p>
        </div>
      </Modal>
    )
  }
}

export default deliveredInfoModal
